<template>
  <div class="container">
    <toolbar :back="true" 
      :title="$route.meta.title" 
      rightText="发布" 
      @handleRightTextClick="click">
    </toolbar>
    <div class="t-container">
      <div class="star d-flex align-items-center justify-content-center">
        <star @starInput="starInput"></star>
      </div>
      <div class="form">
        <cube-form
          ref="form"
          :model="form"
          :schema="schema"
          :immediate-validate="false"
          :options="options"
          @validate="validateHandler"
          @submit="submitHandler"
        ></cube-form>
      </div>
    </div>
  </div>
</template>

<script>
import Toolbar from "../../components/Toolbar";
import Star from "./components/Star";

import { saveDiscuss } from "api/DiscussApi";
import { show } from "utils/Base";

export default {
  name: "DiscussEdit",
  components: {
    Toolbar,
    Star
  },
  data() {
    return {
      form: {
        bookId: 0,
        star: 1,
        discussContent: ""
      },
      options: {
        scrollToInvalidField: true,
        layout: "fresh"
      },
      schema: {
        fields: [
          {
            type: "textarea",
            modelKey: "discussContent",
            props: {
              placeholder: "写下优质书评（最多400字）",
              maxlength: 400,
              autofocus: true
            },
            rules: {
              required: true
            },
            messages: {
              required: "书评内容不能为空"
            }
          }
        ]
      }
    };
  },
  methods: {
    click(text) {
      //发布
      this.$refs.form.submit();
    },
    starInput(value) {
      this.form.star = value;
    },
    validateHandler(result) {},
    submitHandler(e) {
      saveDiscuss(this.form).then(res => {
        if (res.meta.success) {
          show("发布书评成功");
        }
      });
    }
  },
  created() {
    this.form.bookId = this.$route.params.bookId;
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

.star {
  height: 80px;
}

.form {
  & >>> .cube-form-item, & >>> .cube-form_fresh .cube-form-item {
    padding: 0;
  }

  & >>> .cube-textarea-wrapper {
    height: 100px;
  }

  & >>> .cube-textarea_active::after {
    border: none;
  }
}
</style>
